<!--
* Date:    2018/9/25.
* Creator: 003.
* File:    登录.
-->
<template>
<div class="login">
  <div class="login-main">
    <div class="login-head">
      <img src="../../../static/login-booking.png" alt="">
    </div>
    <div class="login-box">
      <div class="login-line">
        <span class="icon icon-user"></span>
        <input class="input input-text" type="text" v-model="account" placeholder="请输入账号">
      </div>
      <div class="login-line">
        <span class="icon icon-lock"></span>
        <input class="input input-text" type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="login-line">
        <span class="icon"></span>
        <input  class="input input-checkbox" type="checkbox" v-model="rememberPwd">
        <label for="remember">记住密码</label>
      </div>
      <div class="login-line">
        <span class="icon"></span>
        <button class="input input-btn" type="button" @click="login"> 登录</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import {apiSource} from '../../travel-api'

  export default {
    data() {
      return {
        // account: 'Admin',
        // password: '12345678'
        account: '',
        password: '',
        rememberPwd: false
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init(){
        var account=window.localStorage.getItem('bookingName')
        if(account){
          this.account=account.replace(/"/g, '')
        }
        var password=window.localStorage.getItem('password')
        if(password){
          this.password = password.replace(/"/g, '')
        }
      },
      /**
       * 登录
       */
      login() {
        var self=this
        if(!this.account||!this.password){
          this.$message.error('请填写账号密码')
          return
        }
        console.log('account login',this.account)
        apiSource({
          type: 'oauth',
          service: 'adminLogin',
          ct: {loginName: this.account, password: this.password,role:'0'}
        }).then((res) => {
          window.localStorage.setItem('booking',JSON.stringify(res))
          window.localStorage.setItem('bookingName',JSON.stringify(this.account))
          // window.localStorage.setItem('booking',JSON.stringify(true))
          window.localStorage.removeItem('setShow') //重要通知
          window.sessionStorage.removeItem('searchTmp')
          window.sessionStorage.removeItem('pageTmp')  
          self.$message.success('登入成功')
          if(self.rememberPwd){
            window.localStorage.setItem('password',JSON.stringify(self.password))
          } else{
            window.localStorage.removeItem('password')
          }
          self.$router.push({path:'/booking/index'})  
        }, (res) => {
          console.debug(res.msg)
        })
      }
    }
  }
</script>

<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    background: #fff url("../../../static/bg.jpg") 0 bottom no-repeat;
    background-size: cover;
  }

  .login-main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -250px;
  }

  .login-box {
    width: 406px;
    height: 335px;
    padding: 50px 40px 20px;
    background: url("../../../static/login-box.png") 0 0 no-repeat;
    border-radius: 5px;
    background-size: 100%;
  }

  .login-head {
    margin-bottom: 5px;
    padding-left: 6px;
    img{
      width: 406px;
    }
  }

  .login-line {
    margin-bottom: 15px;
  }

  .login-line:before, .login-line:after {
    content: " ";
    display: table;
  }

  .icon {
    display: inline-block;
    position: relative;
    top: 5px;
    width: 21px;
    height: 21px;
    margin-right: 15px;
  }

  .icon.icon-user {
    background: url("../../../static/icon_user.png") 0 0 no-repeat;
  }

  .icon.icon-lock {
    background: url("../../../static/icon_lock.png") 0 0 no-repeat;
  }

  .input.input-text {
    width: 275px;
    height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 3px;
    border: 1px solid #8BD5FF;
  }

  div.checker input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
  }

  div.checker, div.checker span, div.checker input {
    width: 19px;
    height: 19px;
  }

  .input-btn {
    width: 275px;
    height: 30px;
    background-color: #18A2C9;
    border-radius: 4px;
    border: 1px solid #8BD5FF;
    color: #fff;
  }

  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
    color: #004D83;
    font-weight: 400;
  }

  .footer .copyright {
    text-align: center;
  }
</style>
